<script setup lang="ts">
import { computed, ref } from "vue";
import { NCheckbox, NButton, NIcon, NTooltip } from "naive-ui";
import { Copy, Edit } from "@vicons/tabler";
import MessageCard from "./MessageCard.vue";

interface Message {
  id: number;
  sender: string;
  content: string;
  timestamp: number;
  avatarSrc?: string;
  avatarColor?: string;
  bgColor?: string;
}

interface MessageList {
  messages: Message[];
}

interface Props {
  id: number;
  messageList: MessageList;
  isReplying: boolean;
  isAnalysisMode: boolean;
  isShared: boolean;
  isSelected: boolean;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (e: "delete", messageId: number): void;
  (e: "showLog", messageId: number): void;
  (e: "regenerate", messageId: number): void;
  (e: "toggleShare", messageId: number): void;
}>();


const isHovered = ref(false);
const isDeleting = ref(false);

const handleDelete = async () => {
  isDeleting.value = true;
  await new Promise((resolve) => setTimeout(resolve, 1000));
  emit("delete", props.id);
};

const itemClick = () => {
  if (props.isShared) {
    emit("toggleShare", props.id);
  }
};

const toggleShare = () => {
  emit("toggleShare", props.id);
};

const groupClass = computed(() => ({
  'bg-gray-100': isHovered.value && !props.isShared,
  'bg-gray-200': props.isSelected && props.isShared,
  'cursor-pointer hover:bg-gray-300': props.isShared,
}));

const totalTokens = computed(() => {
  // 这里应该根据实际情况计算总token数
  return 'xxxx';
});

const processingTime = computed(() => {
  // 这里应该根据实际情况计算处理时间
  return '0.1';
});

const tokensPerSecond = computed(() => {
  // 这里应该根据实际情况计算每秒token数
  return '180';
});
</script>

<template>
  <div class="message-group mb-4 p-2 rounded-lg transition-all duration-300 relative" :class="groupClass"
    @mouseenter="isHovered = true" @mouseleave="isHovered = false" @click="itemClick">
    <div v-if="isDeleting" class="absolute inset-0 bg-gray-200 bg-opacity-50 flex items-center justify-center z-10">
      <div class="loader"></div>
    </div>

    <MessageCard v-for="message in messageList.messages" :key="message.id"
      :bg-color="message.sender === 'user' ? '#f0f5ff' : '#fff'" :nickname="message.sender"
      :avatar-src="message.avatarSrc" :avatar-color="message.avatarColor"
      :placement="message.sender === 'user' ? 'right' : 'left'">
      <template #content>
        {{ message.content }}
      </template>

      <template #message-actions-left>
        <span class="text-gray-500 text-xs items-end flex">
          {{ new Date(message.timestamp).toLocaleString() }}
        </span>
      </template>

      <template #message-actions-right>
        <NTooltip v-if="message.sender === 'user'" trigger="hover" size="small" :show-arrow="false" raw :duration="10">
          <template #trigger>
            <NButton size="tiny" text @click="editMessage(message)">
              <template #icon>
                <NIcon :component="Edit" />
              </template>
            </NButton>
          </template>
          <span class="text-black text-xs items-end flex p-2 rounded-xl bg-gray-100">再次编辑</span>
        </NTooltip>

        <NTooltip trigger="hover" size="small" :show-arrow="false" raw :duration="10">
          <template #trigger>
            <NButton size="tiny" text @click="copyMessage(message)">
              <template #icon>
                <NIcon :component="Copy" />
              </template>
            </NButton>
          </template>
          <span class="text-black text-xs items-end flex p-2 rounded-xl bg-gray-100">复制</span>
        </NTooltip>
      </template>
    </MessageCard>

    <div v-show="isHovered && !isShared"
      class="absolute flex space-x-2 bg-white rounded-lg shadow-md p-1 -top-4 right-8">
      <slot name="toolbar"></slot>
    </div>

    <div v-if="isShared" class="absolute left-2 top-2" @click.stop="toggleShare">
      <NCheckbox :checked="isSelected"></NCheckbox>
    </div>

    <div v-if="isHovered && !isShared"
      class="absolute left-2 bottom-[-10px] text-gray-500 text-11px gap-1.5 z-999 flex space-x-2">
      共消费积分 {{ totalTokens }} (含历史记录) | 用时 {{ processingTime }} 秒 | {{ tokensPerSecond }}tokens/s
    </div>
  </div>
</template>

<style scoped>
.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>
